<script>
import ImageAvater from "../../../components/shiqinComponents/pageComponents/imageAvater.vue";
import BottomButton from "../../../components/shiqinComponents/shiqinButton/bottomButton.vue";

export default {
  name: "birthdayContent",
  components: {BottomButton, ImageAvater},
  data() {
    return {
      userInfo: {
        name: '张三',
        age: '18',
        dateBirth: '四月十九日',
        constellation: '摩羯座',
        shengXiao: '鼠'
      }
    }
  },
  props: {
    bottomFlag: {
      type: Boolean, default: false
    },
    birthdayList: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>

<template>
  <view class="birthdayContent allColumnCenter">
    <view class="anniversariesList_content_userCard row items-center justify-between">
      <image class="anniversariesList_content_userCard_image" src="/static/shiqin-images/userCard.png"></image>
      <view class="anniversariesList_content_userCard_left row items-center ml-20">
        <image-avater src="/static/shiqin-images/woman.png" :width="78" :height="78"></image-avater>
        <view class="anniversariesList_content_userCard_left_info ml-22">
          <view class="anniversariesList_content_userCard_left_info_name row items-center">
            <text>{{ userInfo.name }}</text>
            <image class="anniversariesList_content_userCard_left_info_name_image ml-27"
                   src="/static/shiqin-images/user.png"></image>
          </view>
          <view class="anniversariesList_content_userCard_left_info_personalAttributes row items-center mt-28">
            <view class="anniversariesList_content_userCard_left_info_personalAttributes_age">
              <text class="anniversariesList_content_userCard_left_info_personalAttributes_age_text">
                {{ userInfo.age }}周岁
              </text>
            </view>
            <view class="anniversariesList_content_userCard_left_info_personalAttributes_dateBirth ml-41">
              <text class="anniversariesList_content_userCard_left_info_personalAttributes_dateBirth_text">
                {{ userInfo.dateBirth }}
              </text>
            </view>
            <view class="anniversariesList_content_userCard_left_info_personalAttributes_constellation ml-50">
              <text class="anniversariesList_content_userCard_left_info_personalAttributes_constellation_text">
                {{ userInfo.constellation }}
              </text>
            </view>
            <view class="anniversariesList_content_userCard_left_info_personalAttributes_shengXiao ml-85">
              <text class="anniversariesList_content_userCard_left_info_personalAttributes_shengXiao_text">
                {{ userInfo.shengXiao }}
              </text>
            </view>
          </view>
        </view>
      </view>
      <view class="anniversariesList_content_userCard_right mr-20">
        <image class="anniversariesList_content_userCard_right_image"
               src="/static/shiqin-images/arrow_right.png"></image>
      </view>
    </view>
    <view class="birthdayContent_search allRowCenter mt-40">
      <image class="birthdayContent_search_image" src="/static/shiqin-images/search.png" mode="widthFix"></image>
      <text class="birthdayContent_search_text">请输入姓名</text>
    </view>
    <view class="birthdayContent_list">
      <view class="birthdayContent_list_title row items-center ml-22 mt-33 mb-23">
        <text class="birthdayContent_list_title_text">即将生日</text>
      </view>
      <view class="birthdayContent_list_content mb-37" v-for="(item, index) in birthdayList.month"
            :key="index">
        <image v-if="index%5 === 0" class="birthdayContent_list_content_image"
               src="/static/shiqin-images/first.png"></image>
        <image v-if="index%5 === 1" class="birthdayContent_list_content_image"
               src="/static/shiqin-images/second.png"></image>
        <image v-if="index%5 === 2" class="birthdayContent_list_content_image"
               src="/static/shiqin-images/third.png"></image>
        <image v-if="index%5 === 3" class="birthdayContent_list_content_image"
               src="/static/shiqin-images/fourth.png"></image>
        <image v-if="index%5 === 4" class="birthdayContent_list_content_image"
               src="/static/shiqin-images/fifth.png"></image>
        <view class="birthdayContent_list_content_all row items-center justify-between">
          <view class="birthdayContent_list_content_left ml-20 column">
            <view class="birthdayContent_list_content_left_name">
              <text class="birthdayContent_list_content_left_name_text">{{ item.username }}的生日</text>
            </view>
            <view class="birthdayContent_list_content_left_dayInfo row ml-111">
              <view class="birthdayContent_list_content_left_dayInfo_title column justify-center mr-15">
                <text class="birthdayContent_list_content_left_dayInfo_title_text">还有</text>
              </view>
              <view class="birthdayContent_list_content_left_dayInfo_day">
                <text class="birthdayContent_list_content_left_dayInfo_day_text">{{ item.day }}</text>
              </view>
              <view class="birthdayContent_list_content_left_dayInfo_titles column justify-center ml-15">
                <text class="birthdayContent_list_content_left_dayInfo_titles_text">天</text>
              </view>
            </view>
            <view class="birthdayContent_list_content_left_basicInformation row items-center">
              <view class="birthdayContent_list_content_left_basicInformation_dateBirth">
                <text class="birthdayContent_list_content_left_basicInformation_dateBirth_text">{{
                    item.public_time
                  }}
                </text>
              </view>
              <view class="birthdayContent_list_content_left_basicInformation_dateBirthNV ml-36">
                <text class="birthdayContent_list_content_left_basicInformation_dateBirthNV_text">{{
                    item.date
                  }}
                </text>
              </view>
              <view class="birthdayContent_list_content_left_basicInformation_week ml-36">
                <text class="birthdayContent_list_content_left_basicInformation_week_text">{{ item.week_name }}</text>
              </view>
            </view>
          </view>
          <view class="birthdayContent_list_content_right mr-20">
            <u-icon name="arrow-right" size="27" color="#FFFFFF"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <view class="birthdayContent_list">
      <view class="birthdayContent_list_title row items-center ml-22 mt-33 mb-23">
        <text class="birthdayContent_list_title_text">一个月后生日</text>
      </view>
      <view class="birthdayContent_list_content mb-37" v-for="(item, index) in birthdayList.after_month"
            :key="index">
        <image v-if="index%5 === 0" class="birthdayContent_list_content_image"
               src="/static/shiqin-images/first.png"></image>
        <image v-if="index%5 === 1" class="birthdayContent_list_content_image"
               src="/static/shiqin-images/second.png"></image>
        <image v-if="index%5 === 2" class="birthdayContent_list_content_image"
               src="/static/shiqin-images/third.png"></image>
        <image v-if="index%5 === 3" class="birthdayContent_list_content_image"
               src="/static/shiqin-images/fourth.png"></image>
        <image v-if="index%5 === 4" class="birthdayContent_list_content_image"
               src="/static/shiqin-images/fifth.png"></image>
        <view class="birthdayContent_list_content_all row items-center justify-between">
          <view class="birthdayContent_list_content_left ml-20 column">
            <view class="birthdayContent_list_content_left_name">
              <text class="birthdayContent_list_content_left_name_text">{{ item.username }}的生日</text>
            </view>
            <view class="birthdayContent_list_content_left_dayInfo row ml-111">
              <view class="birthdayContent_list_content_left_dayInfo_title column start mr-9">
                <text class="birthdayContent_list_content_left_dayInfo_title_text">还有</text>
              </view>
              <view class="birthdayContent_list_content_left_dayInfo_day">
                <text class="birthdayContent_list_content_left_dayInfo_day_text">{{ item.day }}</text>
              </view>
              <view class="birthdayContent_list_content_left_dayInfo_titles column justify-end ml-15">
                <text class="birthdayContent_list_content_left_dayInfo_titles_text">天</text>
              </view>
            </view>
            <view class="birthdayContent_list_content_left_basicInformation row items-center">
              <view class="birthdayContent_list_content_left_basicInformation_dateBirth">
                <text class="birthdayContent_list_content_left_basicInformation_dateBirth_text">{{
                    item.public_time
                  }}
                </text>
              </view>
              <view class="birthdayContent_list_content_left_basicInformation_dateBirthNV ml-36">
                <text class="birthdayContent_list_content_left_basicInformation_dateBirthNV_text">{{
                    item.date
                  }}
                </text>
              </view>
              <view class="birthdayContent_list_content_left_basicInformation_week ml-36">
                <text class="birthdayContent_list_content_left_basicInformation_week_text">{{ item.week_name }}</text>
              </view>
            </view>
          </view>
          <view class="birthdayContent_list_content_right mr-20">
            <u-icon name="arrow-right" size="27" color="#FFFFFF"></u-icon>
          </view>
        </view>
      </view>
    </view>
    <bottom-button title="添加生日" :is-fixed="bottomFlag" class="mt-50"
                   @elementClick="$nav.navigateTo('/pages/familyAnniversary/birthday')"></bottom-button>
    <!--    <view class="birthdayContent_bottomButton allRowCenter mt-50" @click.stop="$nav.navigateTo('/pages/familyAnniversary/birthday')">-->
    <!--      <text class="birthdayContent_bottomButton_text">添加生日</text>-->
    <!--    </view>-->
    <view style="height: 80rpx"></view>
  </view>
</template>

<style scoped lang="scss">
.birthdayContent {
  width: 702rpx;

  .anniversariesList_content_userCard {
    width: 702rpx;
    height: 144rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    overflow: hidden;
    position: relative;

    .anniversariesList_content_userCard_image {
      width: 702rpx;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .anniversariesList_content_userCard_left {
      .anniversariesList_content_userCard_left_info {
        .anniversariesList_content_userCard_left_info_name {
          .anniversariesList_content_userCard_left_info_name_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #292929;
          }

          .anniversariesList_content_userCard_left_info_name_image {
            width: 27rpx;
            height: 27rpx;
          }
        }

        .anniversariesList_content_userCard_left_info_personalAttributes {
          .anniversariesList_content_userCard_left_info_personalAttributes_age {
            .anniversariesList_content_userCard_left_info_personalAttributes_age_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #696969;
            }
          }

          .anniversariesList_content_userCard_left_info_personalAttributes_dateBirth {
            .anniversariesList_content_userCard_left_info_personalAttributes_dateBirth_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #696969;
            }
          }

          .anniversariesList_content_userCard_left_info_personalAttributes_constellation {
            .anniversariesList_content_userCard_left_info_personalAttributes_constellation_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #696969;
            }
          }

          .anniversariesList_content_userCard_left_info_personalAttributes_shengXiao {
            .anniversariesList_content_userCard_left_info_personalAttributes_shengXiao_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 24rpx;
              color: #696969;
            }
          }
        }
      }
    }

    .anniversariesList_content_userCard_right {
      .anniversariesList_content_userCard_right_image {
        width: 25rpx;
        height: 25rpx;
      }
    }
  }

  .birthdayContent_search {
    width: 702rpx;
    height: 80rpx;
    background: #E5E5E5;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .birthdayContent_search_image {
      width: 32rpx;
      height: 32rpx;
    }

    .birthdayContent_search_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #A0A0A0;
    }
  }

  .birthdayContent_list {
    width: 702rpx;

    .birthdayContent_list_title {
      width: 702rpx;

      .birthdayContent_list_title_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #0F0F0F;
      }
    }

    .birthdayContent_list_content {
      width: 702rpx;
      height: 179rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      overflow: hidden;
      position: relative;

      .birthdayContent_list_content_image {
        position: absolute;
        top: 0;
        left: 0;
        width: 702rpx;
        height: 100%;
        z-index: 0;
      }

      .birthdayContent_list_content_all {
        position: absolute;
        top: 0;
        left: 0;
        width: 702rpx;
        height: 100%;

        .birthdayContent_list_content_left {
          .birthdayContent_list_content_left_name {
            .birthdayContent_list_content_left_name_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 30rpx;
              color: #FFFFFF;
            }
          }

          .birthdayContent_list_content_left_dayInfo {
            .birthdayContent_list_content_left_dayInfo_title {
              .birthdayContent_list_content_left_dayInfo_title_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 20rpx;
                color: #FFFFFF;
              }
            }

            .birthdayContent_list_content_left_dayInfo_day {
              .birthdayContent_list_content_left_dayInfo_day_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 60rpx;
                color: #FFFFFF;
                text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
              }
            }

            .birthdayContent_list_content_left_dayInfo_titles {
              .birthdayContent_list_content_left_dayInfo_titles_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 20rpx;
                color: #FFFFFF;
              }
            }
          }

          .birthdayContent_list_content_left_basicInformation {
            .birthdayContent_list_content_left_basicInformation_dateBirth {
              .birthdayContent_list_content_left_basicInformation_dateBirth_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
              }
            }

            .birthdayContent_list_content_left_basicInformation_dateBirthNV {
              .birthdayContent_list_content_left_basicInformation_dateBirthNV_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
              }
            }

            .birthdayContent_list_content_left_basicInformation_week {
              .birthdayContent_list_content_left_basicInformation_week_text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
              }
            }
          }
        }
      }

    }
  }

  .birthdayContent_bottomButton {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 50rpx 50rpx 50rpx 50rpx;
    position: fixed;
    bottom: 50rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    .birthdayContent_bottomButton_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }
}
</style>